<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/admin/common::common_head">
    <title>项目类型</title>
</head>
<body class="cm-no-transition cm-1-navbar">
<!--后台公共侧边栏（菜单）-->
<div th:replace="common/admin/common::common_siderbar"></div>
<!--后台公共顶部-->
<div th:replace="common/admin/common::common_top"></div>
<div id="global">
    <div class="container-fluid">
        <div class="row cm-fix-height">
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <h4>项目类型</h4>
                        <div style="margin: 10px 0;">
                            <div class="btn-group" role="group">
                                <!--<button class="btn btn-turquoise" onclick="refreshData();" type="button">
                                    <i class="fa fa-refresh"></i> 刷新
                                </button>-->
                                <button class="btn btn-turquoise" data-action="save" data-target="#myModal" data-toggle="modal" type="button">
                                    <i class="fa fa-plus"></i> 添加
                                </button>
                                <!--<button class="btn btn-turquoise" type="button">
                                    <i class="fa fa-trash"></i> 批量删除
                                </button>-->
                            </div>
                        </div>
                        <table class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>类型名称</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="type : ${typeList}">
                                <th scope="row" th:text="${type.id}">1</th>
                                <td th:text="${type.name}">类型1</td>
                                <td>
                                    <button class="btn btn-info" data-action="edit" data-target="#myModal" data-toggle="modal"
                                            th:attrappend="data-id=${type.id}"
                                            type="button"><i class="fa fa-edit"></i> 修改
                                    </button>
                                    <button class="btn btn-danger" data-action="remove" data-target="#myModal" data-toggle="modal"
                                            th:attrappend="data-id=${type.id},data-name=${type.name}"
                                            type="button"><i class="fa fa-trash-o"></i> 删除
                                    </button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div>
                            <div class="pull-left" style="display: inline-block">
                                <span>当前页：[[${pager.currPage}]] / [[${pager.totalPage}]]</span>
                            </div>
                            <nav class="pull-right" style="display: inline-block">
                                <ul class="pagination shadowed" style="margin:0">
                                    <li th:class="(${pager.currPage} eq 1 ? 'disabled')">
                                        <a
                                                th:href="(${pager.currPage} eq 1 ? 'javascript:;' : @{/admin/product-type/list(currPage=${pager.currPage-1},pageSize=${pager.pageSize})})">
                                            <span><i class="fa fa-angle-left"></i></span>
                                        </a>
                                    </li>
                                    <li th:class="(${pager.currPage} eq ${i} ? 'active')" th:each="i : ${#numbers.sequence(1,pager.totalPage)}">
                                        <a
                                                th:href="(${pager.currPage} eq ${i} ? 'javascript:;' : @{/admin/product-type/list(currPage=${i},pageSize=${pager.pageSize})})"
                                                th:text="${i}">1</a>
                                    </li>
                                    <li th:class="(${pager.currPage} eq ${pager.totalPage} ? 'disabled')">
                                        <a
                                                th:href="(${pager.currPage} eq ${pager.totalPage} ? 'javascript:;' : @{/admin/product-type/list(currPage=${pager.currPage+1},pageSize=${pager.pageSize})})">
                                            <span><i class="fa fa-angle-right"></i></span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                            <span style="clear: both"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--模态框-->
    <div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog" tabindex="-1">
        <div aria-hidden="true" class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">
                        添加项目类型
                        <a class="anchorjs-link" href="#myModalLabel"><span class="anchorjs-icon"></span></a>
                    </h4>
                </div>
                <div class="modal-body">
                    <p id="remove-hint-box"></p>
                    <form class="form-horizontal" id="actionForm">
                        <input id="hidden_input_id" type="hidden">
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="type_name">类型名称：</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="type_name" maxlength="10" name="name" placeholder="请输入类型名称" type="text">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal" type="button">取消</button>
                    <button class="btn btn-primary" id="submitBtn" type="button">提交</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <footer th:replace="common/admin/common::common_footer"></footer>
</div>

<script th:replace="common/admin/common::common_footer_script"></script>
<script th:src="@{/admin/assets/layer/layer.js}" type="text/javascript"></script>
<script type="text/javascript">
    document.title = '亿人宝 - 项目类型';
    $(function () {
        $('#myModal').on('show.bs.modal', function (event) {
            // 清空表单
            $('#hidden_input_id').removeAttr('name');
            $('#hidden_input_id').val('');
            $('#type_name').val('');

            let modal = $(this);
            let loadIndex = layer.load(1, {// loading
                offset: ['50%', "50%"],
                shade: [0.1, '#fff'] //0.1透明度的白色背景
            });
            let button = $(event.relatedTarget);// 点击按钮
            let action = button.data('action');// 获取当前动作

            if (action == 'save') {
                $('#remove-hint-box').hide();
                $('#actionForm').show();
                modal.find('.modal-title').text('添加项目类型');
                layer.close(loadIndex);

                $('#submitBtn')[0].onclick = function () {
                    submitForm('[[@{/admin/product-type/save}]]', $('#actionForm').serialize());
                };
            } else if (action == 'edit') {// action == 'edit'编辑
                $('#remove-hint-box').hide();
                $('#actionForm').show();
                let id = button.data('id');
                modal.find('.modal-title').text('编辑项目类型');
                $.get('[[@{/admin/product-type/edit/}]]' + id, {}, function (data) {
                    if (null != data.obj) {
                        $('#hidden_input_id').attr('name', 'id');
                        $('#hidden_input_id').attr('value', data.obj.id);
                        modal.find('.modal-body #type_name').val(data.obj.name);
                    }
                    layer.close(loadIndex);
                }, 'json');

                $('#submitBtn')[0].onclick = function () {
                    submitForm('[[@{/admin/product-type/edit}]]', $('#actionForm').serialize());
                };
            } else {
                $('#remove-hint-box').show();
                $('#actionForm').hide();
                // 删除
                let id = button.data('id');
                let name = button.data('name');
                modal.find('.modal-title').text('确认删除');
                modal.find('.modal-body #remove-hint-box').text('确认要删除该类型【' + name + '】吗？');
                layer.close(loadIndex);

                $('#submitBtn')[0].onclick = function () {
                    submitForm('[[@{/admin/product-type/remove/}]]' + id, {});
                };
            }
        });
    });

    // 表单提交
    function submitForm(url, params) {
        let loadIndex = layer.load(1, {
            offset: ['50%', "50%"],
            shade: [0.1, '#fff'] //0.1透明度的白色背景
        });
        $.post(url, params, function (data) {
            layer.close(loadIndex);
            if (data.code === 0) {
                layer.msg(data.msg, {icon: 1, time: 1000}, function () {
                    location.reload();
                });
            } else {
                layer.msg(data.msg, {time: 1500});
            }
        }, 'json');
    }
</script>
</body>
</html>
